<template>
  <div v-if="showPerson">
    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
      :is-person="true"
      @hasData="userHasData"
    >
      <template #filter-content>
        <el-input v-model="listQuery.params.realName" clearable placeholder="搜索人员" style="width: 200px;margin-left: 200px;margin-top: -32px;" class="filter-item" size="small" />
      </template>

      <template #data-columns>
        <el-table-column
          label="用户名"
          prop="userName"
          align="center"
        />
        <el-table-column
          label="姓名"
          prop="realName"
          align="center"
        />
        <el-table-column
          label="考试时间"
          prop="updateTime"
          align="center"
        />
        <el-table-column
          label="成绩"
          prop="newScore"
          align="center"
          sortable="true"
        />
        <el-table-column
          label="是否通过"
          align="center"
        >
          <template v-slot="scope">
            <span v-if="scope.row.examCount===0" style="color: #ff0000;">缺考</span>
            <span v-else-if="scope.row.passed" style="color: #00ff00;">通过</span>
            <span v-else style="color: #ff0000;">未通过</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template v-slot="scope">
            <div v-loading="scope.row.loading">
              <el-link type="primary" icon="el-icon-view" @click="showPaper(scope.row.userId, scope.$index)">AI考试分析</el-link>
            </div>
          </template>
        </el-table-column>
      </template>
    </data-table>

    <el-dialog :visible="showPerAnalysis" :before-close="()=>showPerAnalysis=false" title="AI个人考试分析结果" width="65%">
      <vue-office-docx :src="personPaper?baseUrl+'/upload/file/'+personPaper.examText:''" class="full"/>
      <el-button type="primary" size="medium" class="downLoadBtn" @click="downLoadRes">下载</el-button>
    </el-dialog>
  </div>
</template>
<script>
import DataTable from '@/components/DataTable'
import VueOfficeDocx from '@vue-office/docx'
import { postData } from '@/api/common'
export default {
  components: { DataTable, VueOfficeDocx },
  props: {
    examId: String,
    showPerson: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      listQuery: {
        current: 1,
        size: 10,
        params: {
          examId: '',
          realName: ''
        }
      },
      options: {
        // 可批量操作
        multi: false,
        // 列表请求URL
        listUrl: '/api/stat/exam/user-paging'
      },
      showPerAnalysis: false,
      personPaper: null,
      windowHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      baseUrl: '',
      curUserIndex: 0
    }
  },
  created() {
    this.listQuery.params.examId = this.examId
  },
  mounted() {
    this.baseUrl = process.env.VUE_APP_BASE_API
  },
  methods: {
    showPaper(id, index) {
      this.curUserIndex = index
      this.$refs.pagingTable.dataList.records[index].loading = true
      postData('/api/stat/exam/student-ai', { userId: id, ExamId: this.examId }).then(res => {
        this.$refs.pagingTable.dataList.records[index].loading = false
        this.personPaper = res.data
        if (!res.data.examText) {
          this.$message.error('考试分析失败！')
          return
        }
        this.showPerAnalysis = true
      }).catch(err => {
        console.log(err)
        this.$refs.pagingTable.dataList.records[index].loading = false
      })
    },
    userHasData(e) {
      return e
    },
    downLoadRes() {
      const path = this.baseUrl + '/upload/file/' + this.personPaper.examText
      let link = document.createElement('a')
      link.href = path
      link.download = this.personPaper.examText.split('/')[this.personPaper.examText.split('/').length - 1]
      link.click()
      link = null
      this.$message.success('下载成功!')
    }
  }
}
</script>
<style scoped lang="scss">
.full {
  width: 100%;
  height: 100%;
}
.downLoadBtn {
  width: 120px;
  margin: 10px 50% 0;
}
</style>
